<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { useLocation } from '@/hooks/web/useLocation'
	import { returnOrderDetail } from '@/package_tms/api/Home'
	import { uploadImgApi } from '@/package_tms/api/Utils'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	interface RouteParams {
		name : string,
		id : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getDetail()
	})
	const fileList = ref([])

	const useGetDetail = () => {
		const detailInfo = ref({})

		const getDetail = async () => {
			const params = {
				id: unref(routeParams).id
			}
			const res = await returnOrderDetail(params)
			detailInfo.value = res.data
			fileList.value = detailInfo.value?.image.split(",").map((val) => {
				return {
					url: val
				}
			})
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()
</script>

<template>
	<view class="content">
		<view class="content-box">
			<view class="box-header">
				<view class="header">
					<view class="header-name">订单：{{detailInfo.order_info?.order_no}}</view>
					<view class="header-img">
						<image style="width: 106rpx;height: 60rpx;" src="/package_tms/static/icon/icon7.png"></image>
					</view>
				</view>
			</view>
			<view class="list-goods">
				<view class="list">
					<up-row justify="space-between">
						<up-col span="8">
							<up-text text="商品名称" color="rgba(101, 103, 105, 1)" align="left"></up-text>
						</up-col>
						<!-- <up-col span="3">
							<up-icon label="单价" labelSize="28rpx" labelColor="rgba(101, 103, 105, 1)" labelPos="left">
							</up-icon>
						</up-col> -->
						<!-- <up-col span="2">
							<up-text text="单位" color="rgba(101, 103, 105, 1)" align="left"></up-text>
						</up-col> -->
						<up-col span="2">
							<up-text text="签收数" color="rgba(101, 103, 105, 1)" align="left"></up-text>
						</up-col>
					</up-row>
					<block v-for="(item, index) in detailInfo.order_detail" :key="index">
						<up-row justify="space-between">
							<up-col span="8">
								<view style="display: flex;gap: 3rpx;font-weight: 500;">
									<up-tag style="display: flex;gap: 3rpx;font-weight: 500;" text="赠品" plain
										size="mini" v-if="item.goods_type == '2'"></up-tag>
									<up-text :text="item.goods.name" align="left"></up-text>
								</view>
							</up-col>
							<!-- <up-col span="3">
								<up-text :text="item.true_price" color="rgba(101, 103, 105, 1)"
									align="center"></up-text>
							</up-col> -->
							<!-- <up-col span="2">
								<up-text :text="item?.goods_spec?.unit" color="rgba(101, 103, 105, 1)"
									align="left"></up-text>
							</up-col> -->
							<up-col span="2">
								<up-text :text="item.transfer_num + item?.goods_spec?.unit"
									color="rgba(101, 103, 105, 1)" align="left"></up-text>
							</up-col>
						</up-row>
					</block>
					<view class="line"></view>
					<view class="beizhu">备注：<text style="color: rgba(2, 14, 36, 1);">{{detailInfo.remark}}</text></view>
				</view>
			</view>
		</view>
		<view class="content-receipt">
			<view class="receipt-name">
				<view style="color: rgba(101, 103, 105, 1);">门店：</view>
				<view style="color: rgba(55, 131, 252, 1);">{{detailInfo.store?.name}}</view>

			</view>
			<view class="img-line">
				<up-text text="拍照: " color="rgba(101, 103, 105, 1)" margin="0 0 20rpx 0"></up-text>
				<up-upload :fileList="fileList" :maxCount="fileList.length" :previewFullImage="true"
					:deletable="false"></up-upload>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		padding-top: 20rpx;
		box-sizing: border-box;

		/* 兼容iOS 11.2及以上 */
		.content-box {
			width: 702rpx;
			// height: 390rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			margin: 20rpx auto;

			.box-header {
				width: 702rpx;
				height: 132rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
				background: linear-gradient(180deg, rgba(55, 131, 252, 0.15) 0%, rgba(55, 131, 252, 0.02) 100%);

				.header {
					display: flex;
					justify-content: space-between;

					.header-name {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(100, 101, 102, 1);
						margin-top: 30rpx;
						margin-left: 30rpx;
					}

					.header-img {
						width: 106rpx;
						height: 60rpx;
					}
				}

				.footer-foot {
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					margin-left: 30rpx;

					.foot-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(2, 14, 36, 1);
					}

					.foot-text {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(101, 103, 105, 1);
						margin-left: 20rpx;
					}
				}


			}

			.list-goods {
				margin-top: 20rpx;

				.list {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					padding: 0rpx 30rpx;
					box-sizing: border-box;
				}

				:deep(.u-icon) {
					justify-content: center;
				}

				.line {
					width: 654rpx;
					height: 0rpx;
					margin: 20rpx auto;
					border: 2rpx solid rgba(0, 0, 0, 0.1);
				}

				.beizhu {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
					margin-bottom: 30rpx;
				}

			}


		}

		.content-receipt {
			width: 702rpx;
			// height: 480rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.receipt-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-box {
					width: 80rpx;
					height: 42rpx;
					border-radius: 6rpx;
					background: rgba(55, 131, 252, 0.2);
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(55, 131, 252, 1);
					text-align: center;
					line-height: 42rpx;
				}
			}

			.xian {
				width: 654rpx;
				height: 4rpx;
				margin: 20rpx 0rpx;
				background: linear-gradient(90deg, rgba(55, 131, 252, 1) 0%, rgba(255, 255, 255, 0) 100%);
			}

			.receipt-name {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}

			.img-line {
				margin-top: 20rpx;
			}
		}
	}
</style>